<template>
<view>
	<!-- 头部：定位,搜索 start-->
	<view class="titcontent">
		<view class="viewinput"><input type="text" placeholder="请输入商家或商品名"></view>
		<view class="iconfont icongouwu-2"></view>
	</view>
	<!-- 头部：定位,搜索 end-->
	<!-- 左右联动菜品start -->
	<view class="page-body" :style="'height:'+height+'px'">
		<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'" :scroll-top="scrollLeftTop" scroll-with-animation>
			<view class="nav-left-item" @click="categoryClickMain(index)" :key="index" :class="index==categoryActive?'active':''"
				v-for="(item,index) in classifyData">
				<!-- 文字两行 -->
				<text v-if="item.titlename.length>=10">{{item.titlename.substring(0,9)+'...'}}</text>
				<!-- 文字一行 -->
				<text v-if="item.titlename.length>0 && item.titlename.length<6">{{item.titlename}}</text>
			</view>
		</scroll-view>
		<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+height+'px'" scroll-with-animation>
			<view v-for="(foods,index) in classifyData" :key="index" class="box">
				<view class="detailtitle">
					<!-- 少文字处理 -->
					<text v-if="foods.titlename.length>0 && foods.titlename.length<17">{{foods.titlename}}</text>
					<!-- 多文字处理 -->
					<text v-if="foods.titlename.length>=17">{{foods.titlename.substring(0,17)+'...'}}</text>
				</view>
				<view :id="i==0?'first':''" class="nav-right-item" v-for="(item,i) in foods.foods" :key="i" @click="cart(item.name)">
					<image :src="item.img"></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top nameofdish">{{item.name}}</view>
						<!-- 第二,三行start -->
						<view class="uni-media-list-text-bottom uni-ellipsis listline">{{item.detail}}</view>
						<view class="uni-media-list-text-bottom uni-ellipsis listline">月售:{{item.salesvolumes}}</view>
						<view class="uni-media-list-text-bottom uni-ellipsis listline money"><text>￥</text>{{item.money}}<image src="/static/icon/public/addfood.png"></image></view>
						<!-- 第二,三行end -->
					</view>
				</view>
				
			</view>
		</scroll-view>
	</view>
	<!-- 左右联动菜品end -->
</view>
</template>

<script>
	import classifyData from '../../common/classify.data.js';
	export default {
		data() {
			return {
				name: "wkiwi",
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollLeftTop: 0,
				// scrollHeight: 0,
				classifyData:classifyData,
				arr:[0],//初始值，后边计算会根据手机适配覆盖
				leftItemHeight: 51,//49行会计算出新值进行覆盖
				navLeftHeight:0,//左边scroll-view 内层nav的总高度
				diff: 0,//左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight:0,//如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
			}
		},
		created(){
			//如果你的分类数据为后台异步获取请	将下方代码放置你的数据回调中
			// this.$nextTick(()=>{
			// 	this.getHeightList();
			// })
		},
		onLoad: function () {
			this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight;
		},
		onReady() {
			this.getHeightList();
		},
		methods: {
			getHeightList(){
				let _this = this;
				let selectorQuery=uni.createSelectorQuery();
				selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
					_this.leftItemHeight  =  rects[0].height;
					_this.navLeftHeight = _this.leftItemHeight * classifyData.length;
					_this.diff =  _this.navLeftHeight - _this.height;
				});
				selectorQuery.selectAll('.box').boundingClientRect(function(rects) {
					let arr = [0];
					let top = 0;
					rects.forEach(function(rect){
						// console.log(rect);
						top += rect.height;
						arr.push(top)
						})
						// console.log(arr)
						_this.arr = arr
					}).exec()
			},
			scroll(e) {
				let _this = this
				if(this.timeoutId){
					clearTimeout(this.timeoutId);
				}
				this.timeoutId = setTimeout(function(){ //节流
					_this.scrollHeight = e.detail.scrollTop + 1 + _this.height/2;
					//+1不要删除，解决最后一项某种情况下翻到底部，左边按钮并不会切换至最后一个
					//若想使切换参考线为屏幕顶部请删除 _this.height/2
					for (let i = 0; i < _this.arr.length;i++) {
						let height1 = _this.arr[i];
						let height2 = _this.arr[i+1];
						if (!height2 || (_this.scrollHeight >= height1 && _this.scrollHeight < height2)) {
							_this.categoryActive = i;
							(_this.diff>0) && (_this.scrollLeftTop = Math.round((_this.categoryActive * _this.diff)/(classifyData.length-1)));
							//滚动距离
							// console.log(_this.scrollHeight)
							
							return false;
						}
					}
					_this.categoryActive = 0;
					_this.timeoutId = undefined;
				}, 10)
			},
			categoryClickMain(index) {
				this.categoryActive = index;
				this.scrollTop == this.arr[index] ? this.scrollTop = this.scrollTop+1 : this.scrollTop = this.arr[index]//防止两次相等造成点击不触发滚动时间
			},
			cart: function (text) {
				uni.showToast({
					title: text,
					icon: "none",
				})
			}
		},
		components: {
		}
	}
</script>

<style lang="less" scoped>
	@import url("../../common/uni.css");
		.titcontent{
			width: 100%;
			height: 100upx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			font-size: 16px;
			position: fixed;
			/* #ifdef MP-WEIXIN */
			top:0;
			/* #endif */
			/* #ifdef H5 */
			top:80upx;
			/* #endif */
			z-index: 1;
			color: #000;
			background-color: #fff;
		.viewinput{
			position: relative;
			flex: .8;
		input{
			background-color: #EBEBE4;
			border-radius: 100px;
			overflow: hidden;
			text-overflow: ellipsis;
			padding: 3px 30px;
			font-size: 14px;
			// pointer-events: none;
		}
		input:after{
			content: '';
			background: url(../../static/icon/homepage/HomeSelect.png);
			background-repeat: no-repeat;
			background-size: contain;
			width: 15px;
			height: 15px;
			margin-left:10px;
			margin-right: 5px;
			position: absolute;
			left: 0;
			top: 50%;
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
		}
		}
		.icongouwu-2{
			color: #f94f47;
			font-size: 45upx;
		}
	}
	/* 标题搜索end */
	/* 左右联动菜品start */
	.page-body {
		display: flex;
		background: #fff;
		overflow: hidden;
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top:80upx;
		/* #endif */
		/* #ifdef H5 */
		top: 180upx;
		/* #endif */
		padding-top: 10px;
	}
	.nav {
		display: flex;
		width: 100%;
	}
	/* 左侧列表start */
	.nav-left {
		width: 25%;
		background: #fafafa;
	}
	.nav-left-item {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-wrap: break-word;
		word-break: break-all;
		text-align: center;
		padding: 30upx 10upx;
		font-size: 30upx;
	}
	.nav-left-item:last-child{
		border-bottom: none;
	}
	/* 左侧列表end */
	.nav-right {
		width: 75%;
	}
	/* 右侧列表start */
	.box {
		display: block;
		overflow: hidden;
		border-bottom: 20upx solid #f3f3f3;
		/* min-height: 100vh; */ 
		/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
	}
	/* 明细标题栏 */
	.detailtitle{
		padding: 25upx;
		border-left: 5px solid #F94F47;
	}
	.box:last-child {
		border: none;
		min-height:100vh;
		padding-bottom: 80upx;
	}
	/* 菜品样式 start */
	.nav-right-item {
		width: 90%;
		height: 220upx;
		padding: 25upx;
		font-size: 28upx;
		background: #fff;
	}
	.nav-right-item image {
		width: 150upx;
		height: 150upx;
		float: left;
	}
	/* 内部介绍 */
	.uni-media-list-body{
		width: 335upx;
		height: auto;
		float: left;
		padding-left: 20upx;
	}
	/* 菜名 */
	.nameofdish{
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-wrap: break-word;
		word-break: break-all;
		display: -webkit-box;
		font-size: 30upx;
		font-weight: bold;
		line-height: 20px;
	}
	/* 第二三四行 */
	.listline{
		margin-top: 6px;
	}
	.listline image{
		width: 15px;
		height: 13px;
		margin-right: 6px;
	}
	.money{
		color: #F46349;
		font-size: 18px;
	}
	.money>text{
		font-size: 12px;
	}
	.money>image{
		float: right;
		width: 20px;
		height: 20px;
	}
	/* 菜品样式 end */
	.active {
		color: #F94F47;
		background: #fff;
		border-right: 0;
		font-weight: bold;
	}
	::-webkit-scrollbar {/*取消小程序的默认导航条样式*/
		width: 0;
		height: 0;
		color: transparent;
	}
/* 右侧列表end */
/* 左右联动菜品end */
</style>
